// 标签设置
import React, { useState } from 'react';
import { Switch, Select, Checkbox } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';
const { Option } = Select;

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const ColumnLabelSetting = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic' ];
	const [ isShowLabelData, setIsShowLabelData ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowLabelData' ) ? config.style.isShowLabelData : false
	);
	const [ onlyShowLabelMax, setOnlyShowLabelMax ] = useState(
		config.style && config.style.hasOwnProperty( 'onlyShowLabelMax' ) ? config.style.onlyShowLabelMax : false
	);
	const [ onlyShowLabelMin, setOnlyShowLabelMin ] = useState(
		config.style && config.style.hasOwnProperty( 'onlyShowLabelMin' ) ? config.style.onlyShowLabelMin : false
	);

	// const [ chartLabelMarkType, setChartLabelMarkType ] = useState(
	// 	config.style && config.style.hasOwnProperty( 'chartLabelMarkType' ) ? config.style.chartLabelMarkType : 'diamond'
	// );

	const onChange = ( checked: boolean, name: string, cb: any ) => {
		cb && cb();
		form.setFieldsValue( { [name]: checked } );
		onValuesChange( config.type, config.key, { [name]: checked }, 'style' );
	};

	const onCheckboxChange = ( checkedValues ) => {
		// console.log( checkedValues );
		onValuesChange( config.type, config.key, { showArea: checkedValues }, 'style' );
	};

	const checkboxOptions = [
		{ label: '柱状图', value: 'column' },
		{ label: '折线图', value: 'line' },
	  ];

	// 是否显示数据，仅显示最大数据，仅显示最小数据，标签字体（字体、大小、颜色、粗细、斜体），
	return (
		<div>
			<FormItem label="是否显示数据" name="isShowLabelData" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
				<Switch
					checked={isShowLabelData}
					onChange={( checked ) => onChange( checked, 'isShowLabelData', setIsShowLabelData( checked ) )}
				></Switch>
			</FormItem>
			{isShowLabelData && (
				<>
					{config.type === 'ColumnLine' && <FormItem label="显示范围" name="showArea" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
						<Checkbox.Group options={checkboxOptions} onChange={onCheckboxChange} />
					</FormItem>}
					<FormItem label="显示最大数据" name="onlyShowLabelMax" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
						<Switch
							checked={onlyShowLabelMax}
							onChange={( checked ) => onChange( checked, 'onlyShowLabelMax', setOnlyShowLabelMax( checked ) )}
						></Switch>
					</FormItem>
					<FormItem label="显示最小数据" name="onlyShowLabelMin" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
						<Switch
							checked={onlyShowLabelMin}
							onChange={( checked ) => onChange( checked, 'onlyShowLabelMin', setOnlyShowLabelMin( checked ) )}
						></Switch>
					</FormItem>

					<FormItem label="标签字体" name="chartLabelFont" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
						<Editor
							config={config}
							form={form}
							onValuesChange={onValuesChange}
							fontFamilyName="labelFontFamily"
							fontSizeName="labelFontSize"
							fontColorName="labelFontColor"
							boldName="labelFontBold"
							italicName="labelFontItalic"
							fontConfig={fontConfig}
						/>
					</FormItem>
					{
						props.config.type !== 'RadarChart' && 
						<FormItem label="标签位置" name="chartLabelPosition" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
							<Select>
								<Option value="top">顶部</Option>
								<Option value="middle">中间</Option>
								<Option value="bottom">底部</Option>
							</Select>
						</FormItem>
					}
					
				</>
			)}

		</div>
	);
};

export default React.memo( ColumnLabelSetting );
